/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="house-type">
    <Title title="征收房屋类型(万平方米)"></Title>
    <div class="main">
      <v-chart auto-resize :options="options" theme="macarons" ref="chart"/>
    </div>
  </div>
</template>

<script>
import Title from "../Title";
import ECharts from "vue-echarts";

var category = ["其他", "商业", "办公", "住宅"];
var barData = [6800, 2100, 800, 500];

const getChartOptions = data => {
  if(!data) return {};
  let chartOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      top: 0,
      left: "3%",
      right: window.chartFontSize * 6,
      bottom: -window.chartFontSize*1.5,
      containLabel: true
    },
    xAxis: {
      type: "value",
      show: false,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: "category",
      data: ["其他", "商业", "办公", "住宅"],
      splitLine: { show: false },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: window.chartFontSize
      }
    },
    series: [
      {
        name: "房屋征收类型",
        type: "bar",
        data: [data.other, data.business, data.business, data.live],
        barWidth: window.chartFontSize ,
        barGap: window.chartFontSize ,
        smooth: true,
        label: {
          normal: {
            show: true,
            position: "right",
            offset: [5, 2],
            textStyle: {
              color: "#ffffff",
              fontSize: window.chartFontSize
            },
            formatter: "{c}万㎡"
          }
        },
        itemStyle: {
          emphasis: {
            barBorderRadius: 7
          },
          normal: {
            barBorderRadius: 7,
            color: new ECharts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "rgba(60, 214, 134,1)" },
              { offset: 1, color: "rgba(60, 214, 134,0.3)" }
            ])
          }
        }
      }
    ]
  };
  return chartOption;
};
export default {
  props:{
    house: [Object]
  },
  watch:{
    house: function(data){
      this.options = getChartOptions(data);
    }
  },
  data() {
    return {
      options: getChartOptions(this.house),
    };
  },
  components: {
    Title,
    "v-chart": ECharts
  }
};
</script>

<style lang='less' scoped>
.house-type {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .main {
    width: 100%;
    height: 80%;
    position: relative;
  }
  ul {
    display: flex;
    flex-direction: column;
    padding: 1vw 2vw 1vw 1vw;
    height: 80%;
    box-sizing: border-box;
    li {
      flex: 1;
      display: flex;
      position: relative;
      align-items: center;
      .label,
      .value {
        display: inline-block;
      }
      .label {
        text-align: right;
        padding-right: 1vw;
        font-size: 1.2rem;
      }
      .value {
        flex: 1;
      }
      .text {
        padding: 0 1vw;
        width: 30%;
        font-size: 1.2rem;
      }
    }
  }
}
</style>
